<!DOCTYPE HTML>
<html lang="en-US">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				padding: 0;
				margin: 0;
			}

			.box {
				width: 480px;
				margin: 100px auto;
			}

			img {
				width: 480px;
				height: 300px;
				border-radius: 100% 100% 100% 100% / 0% 0% 30% 30%;

			}

			/* border-radius
		前面的是水平半径；后面的是垂直半径*/

			/* 
		 border-radius分别指定各个角弯曲程度
		 */
		.b{
			border-radius: 0% 0% 30% 30%;
			width: 480px;
			height: 300px;
			margin: 30px auto;
			background-color: #222;
		}
			
		.q{
			border-radius: 10% 25% 40% 50%;
			width: 480px;
			height: 300px;
			margin: 30px auto;
			background-color: #222;
		}
		.c{
			width: 300px;
			height: 300px;
			margin: 30px auto;
			background-color: #aaaaff;
			border-radius: 50% / 100% 100% 0 0;
		}
			
		.d{
			border-radius: 100% 0 0 0;
			width: 300px;
			height: 300px;
			margin: 30px auto;
			background-color: #aa557f;
		}
			
		.e{
			border-radius: 100% 0 0 100% / 50%;
			width: 300px;
			height: 300px;
			margin: 30px auto;
			background-color: #00aa7f;
		}
		</style>
	</head>

	<body>
		<div class="box">
			<img src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="">
		</div>
		<section>
			<div class="b"></div>
		</section>
		<section>
			<div class="q"></div>
		</section>
		<section>
			<div class="c"></div>
		</section>
		<section>
			<div class="d"></div>
		</section>
		<section>
			<div class="e"></div>
		</section>
	</body>

</html>
